<script setup lang="ts">
import { useRoute,useRouter } from 'vue-router';
import { onBeforeUpdate } from 'vue';
import { ref } from 'vue';
import type{ Ref } from 'vue';
const route =useRoute()
const selectedPaymentMethod = ref<string[]>(['vx']);
let rember=''
const router =useRouter()
const newp=Number(route.query.nprice)-17
const handleCheckboxGroupChange = (value: string[]) => {
  // 由于是单选，value 数组应该只有一个元素
  if (value.length >1) {
    
    selectedPaymentMethod.value.shift()
    rember= selectedPaymentMethod.value[0]
  }
  if(!value.length){
    selectedPaymentMethod.value.push(rember)
  }
 

};
const show = ref(false);
function showPopup() {
      show.value = true;
    };
function finshClick(){
    router.push(   {
     name: 'step3',
     query: {
       year:route.query.year,
       month:route.query.month,
       day:route.query.day,
       hour:route.query.hour,
       min:route.query.min,
       sec:route.query.sec,
       nmonth:route.query.nmonth,
       nday:route.query.nday,
       bed:  route.query.bed,
       kind:  route.query.kind,
       price:  route.query.price,
       proid:route.query.proid,
       start: route.query.start,
       img:route.query.img,
       phone:route.query.phone,
       name:route.query.name,
       nprice:route.query.nprice
        }
})
}
console.log(route.query);
const time= ref(30 * 60 * 1000);
function backClick(){
    router.push(   {
     name: 'detail',
        query: {
          bed:  route.query.bed,
          kind:  route.query.kind,
          price:  route.query.price,
          start: route.query.start,
          img:route.query.img
        }
})
}
</script>
<template>
    <main class="box">
    <div class="content"> 
   <div class="toptitle">
    <van-icon @click="backClick()" class="back" size="50" name="arrow-left" />
    <div class="pay">支付订单</div>
   </div>
   <div class="lasttime"> 支付剩余时间：<van-count-down class="time" :time="time" /> </div>
   <div class="price">￥{{ route.query.nprice }}.00</div>
   <div @click="showPopup" class="roommessage">豪华休闲房【限{{route.query.hour}}点后入住，明天12点前退...  <van-icon  class="back" size="20" name="arrow" /></div>
   <van-popup v-model:show="show" class="pop">
   <div class="poptop">订单详情</div>
   <div class="pmt" >预订信息</div>
   <div class="popboxs">
    <div class="popname">君假酒店（千山城规站店）</div>
    <div class="popname">豪华休闲房【限{{route.query.hour}}点后入住，明天12点前退房】 </div>
    <div class="popname">大床 不含早</div>
    <div class="popname">{{route.query.month}}月{{route.query.day}}日入住，{{route.query.nmonth}}月{{route.query.nday}}日离店，1晚 x 1间</div>
   </div>
   <div class="poppeople">
   <div class="peoplemessages">入住人信息</div>
   <div class="peoplemessages">入住人：{{route.query.name}}</div>
   <div class="peoplemessages">联系手机：{{route.query.phone}}</div>
   </div>
   <div class="popdetail">金额详情</div>
   
   <div class="popmbox"><span>{{ route.query.year }}-{{ route.query.month }}-{{ route.query.day }}</span><span>1× ￥{{ route.query.nprice }}.0</span></div>
   <div class="popmbox"><span>优惠</span><span>-￥17.0</span></div>
   <div class="popmbox"><span>总价</span><span>￥{{newp}}.0</span></div>
   </van-popup>
   <van-checkbox-group v-model="selectedPaymentMethod" @change="handleCheckboxGroupChange">
        <van-cell-group inset>
          <van-cell title="微信支付" class="pay">
            <template #icon>
              <van-icon class="icon" size="40" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E7%A1%AE%E8%AE%A4%E8%AE%A2%E5%8D%95/u1136.png" />
            </template>
            <template #right-icon>
              <van-checkbox name="vx" />
            </template>
          </van-cell>
          <van-cell title="支付宝支付" class="pay">
            <template #icon>
              <van-icon class="icon" size="40" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E7%A1%AE%E8%AE%A4%E8%AE%A2%E5%8D%95/u1137.png" />
            </template>
            <template #right-icon>
              <van-checkbox name="zfb" />
            </template>
          </van-cell>
          <van-cell title="银行卡支付" class="pay">
            <template #icon>
              <van-icon class="icon" size="40" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E7%A1%AE%E8%AE%A4%E8%AE%A2%E5%8D%95/u1142.png" />
            </template>
            <template #right-icon>
              <van-checkbox name="yhk" />
            </template>
          </van-cell>
          <van-cell title="银行卡支付（备用）" class="pay">
            <template #icon>
              <van-icon class="icon" size="40" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E7%A1%AE%E8%AE%A4%E8%AE%A2%E5%8D%95/u1139.png" />
            </template>
            <template #right-icon>
              <van-checkbox name="yhk2" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <van-button class="submitbutton" @click="finshClick" lain type="primary">确认支付</van-button>
    </div>
    </main>
</template>

<style lang="scss" scoped>
main,.box,.content{
    width: 100%;
    height: 100%;
    background-color: #fbfbfb;
}
.pop{
  width: 90%;
  height: 600px;
  .poptop{
    text-align: center;
    font-size: 22px;
    margin-top: 30px;
    color: #4987fd;
  }
  .pmt{
    width: 90%;
    margin: 30px 5% 10px;
    font-size: 18px;
    padding: 20px 0 ;
    border-bottom: 1px dashed;
  }
  .popboxs{
    width: 90%;
    height: 1.4rem;
    margin: 0px 5%;

    border-bottom: 1px dashed;
    .popname{
      font-size: 16px;
      padding: 5px 0;
    }
   
  }
  .poppeople{
    width: 90%;
    height: 1.0rem;
    margin: 10px 5% 0;
    border-bottom: 1px dashed;
    .peoplemessages{
      font-size: 16px;
      padding: 8px 0;
    }
  }
  .popdetail{
      font-size: 16px;
      padding: 15px 5% 5px;
    }
    .popmbox{
      width: 90%;
      margin: 10px 5% 0;
      display: flex;
      justify-content: space-between;
      span{
        font-size: 14px;
        padding: 5px;
      }
    }
}
.toptitle{
    width: 100%;
    height: 0.5rem;
    position: relative;
    .bacK{
        position: absolute;
        top: 5px;
        left: 10px;
    }
    .pay{
        font-size: 20px;
        position: absolute;
        top: 15px;
        left:calc(50% - 35px);
    }
}
.lasttime{
width: 175px;
    margin: 20px auto ;
    font-size: 16px;
    .time{
        float: right;
        font-size: 16px;
    }
}
.price{
    width: 180px;
    font-size: 36px;
    color: red;
    margin: 10px auto;
}
.roommessage{
    font-size: 16px;
    width: 98%;
    margin: 2px auto;
    text-align: center;
}
.pay{
    width: 98%;
    height: 60px;
    margin: 10px auto;
    font-size: 16px;
    line-height: 40px;
    .icon{
        margin-right: 20px;
    }
}
.submitbutton{
    width: 98%;
    height: 0.5rem;
    position: absolute;
    bottom: 80px;
    left: 1%;
}
</style>
    